<template>
  <div class="header">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="custom-count">
      <span id="busuanzi_container_site_pv">
        <span id="busuanzi_value_site_pv">0</span>人次已浏览
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      images: [
        require('../../assets/images/health1.jpg'),
        require('../../assets/images/health2.png'),
        require('../../assets/images/health3.png'),
        require('../../assets/images/health4.png')
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  width: 100%;
  height: 270px;
  .custom-count {
    position: absolute;
    top: 15%;
    right: 0;
    min-width: 160px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 0 5px;
    color: #fff;
    font-size: 80%;
    line-height: 100%;
    background-color: rgba(27, 137, 250, 0.3);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;

    #busuanzi_container_site_pv {
      display: block !important;
    }
  }
  .van-swipe {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
